<template>
   <sharp v-for="(item,index) in components"  :key="index" class="addProno" :style="formateUnitStyle(item.style)"  
   :originalStyle="item.style">
       <component :is="item.is" :id="item.id" :element="item" /> 
   </sharp>
</template>

<script setup>

import {inject} from'vue';

import Sharp from './editors/sharp.vue'
const components = inject('renderComponents')

const formateUnitStyle = (style = {})=>{
    let styl = {}
    const needleStyle = ['width','height','top','left']

    for(const [k,v] of Object.entries(style)){
        if(typeof v == 'number' && needleStyle.includes(k)){
                 styl[k] = v+'px';
        }else{
            styl[k] = v
        }
    }

    return styl
}


</script>

<style lang="scss" scoped>
  .addProno{
    color: rgb(0, 255, 157);
    background-color: yellow;
  }
</style>